{% extends "UiManager/base.html" %}
{% block title %}环境管理{% endblock %}
{% block new %}
    <button class="btn btn-danger btn-sm fa fa-plus" style="border-radius: 20px" data-toggle="modal" onclick="create()">&nbsp;新建环境</button>
{% endblock %}
{% block location %}
    <div class="am-icon-home fa fa-home" style="font-weight: bold;color: grey; float: right;">&nbsp;当前位置： 环境管理 > 环境列表</div>
{% endblock %}
{% load staticfiles %}
{% block css %}
{% endblock %}
{% block js %}
    <script>
    var projectId = $("#projectInfo").attr("data");

    function cancel() {
        $("#delEnvironment").modal("hide");
        $("#newProject,#edit_env").modal("hide");
        $("#eName").val();
        $("#remark").val();
        $("#message").html("");
        $("#delMessage").html("");
        $("#deleteObj").modal('hide');
    }

    function create() {
        $("#myModalLabel").html("新建环境");
        $("#save").attr("onclick", "save()");
        $("#newProject").modal("show");
        $("#eName").val("");
        $("#eHost").val("");
        $("#remark").val("");
        $("#appPackage").val("");
        $("#appActivity").val("");
        $("#message").html();
    }

    /*删除询问方法*/
    function isDel(id) {
        $("#delButton").attr("onclick", "del(" + id + ")");
        $("#deleteObj").modal("show");
    }

    /*删除方法*/
    function del(id) {
        var data = {
          "id": id,
          "type": "delete"
        };
        $.ajax({
            url: '/ui/edit_env/',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data:JSON.stringify(data),
            success: function (res) {
                if (res.code == 0) {
                    $("#deleteObj").modal("hide");
                    location.reload();
                } else {
                    $("#delMessage").html(res.message);
                }
            }
        });
    }

    function save() {
        var name, remark, host, appPackage, appActivity, resource_name, rule;
        name = $("#eName").val();
        remark = $("#remark").val();
        host = $("#eHost").val();
        appPackage = $("#appPackage").val();
        appActivity = $("#appActivity").val();
        resource_name = $("#resource option:selected").text();
        rule = $("#rule option:selected").text();
        var data = JSON.stringify({"type":"add", "env_name": name, "base_url": host, "simple_desc": remark, "resource_name": resource_name, "appPackage": appPackage, "appActivity": appActivity, "rule": rule});
        $.ajax({
            url: '/ui/add_env/',
            type: 'post',
            contentType: 'application/json',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    $("#newProject").modal("hide")
                    location.reload()
                } else {
                    $("#message").html(res.message)
                }
            }
        });
    }

    function edit(id) {
        $("#edit_env").modal("show");
        $("#edit-save").attr("onclick", "editSave(" + id + ")");
        //$("#edit_message").val('');
        data = {
            'id':id,
            'type':'edit'
        };
        $.ajax({
            url: '/ui/edit_env/',
            type: 'post',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(data),
            success: function (res) {
                $("#edit_eName").val(res.env_name);
                $("#edit_eHost").val(res.base_url);
                $("#edit_remark").val(res.simple_desc);
                $("#edit_appActivity").val(res.capabilities.appActivity);
                $("#edit_appPackage").val(res.capabilities.appPackage);
                $("#edit_resource").val(res.capabilities.app.id);
                $("#edit_rule").val(res.rule);
            }
        });
    }

    function editSave(id) {
        var name, remark, host, appPackage, appActivity, resource_name, rule;
        name = $("#edit_eName").val();
        remark = $("#edit_remark").val();
        host = $("#edit_eHost").val();
        appPackage = $("#edit_appPackage").val();
        appActivity = $("#edit_appActivity").val();
        resource_name = $("#edit_resource option:selected").text();
        rule = $("#edit_rule option:selected").text();
        var data = JSON.stringify({"id":id, "type":"edit_save", "env_name": name, "base_url": host, "simple_desc": remark, "resource_name": resource_name, "appPackage": appPackage, "appActivity": appActivity, "rule": rule});
        $.ajax({
            url: '/ui/edit_env/',
            type: 'post',
            contentType: 'application/json',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    $("#edit_env").modal("hide");
                    location.reload()
                } else {
                    $("#edit_message").html(res.message);
                }
            }
        });
    }
</script>
{% endblock %}
{% block content %}
    <div id="page-wrapper">
        <div id="page-inner">
            <!-- /. ROW  -->
            <!-- /. 表格  -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body" style="min-height:500px">
                            <div class="row mar-bottom-20">
                                <div class="form-inline">
                                    <form id="pro_filter" method="POST" action="/ui/env_list/">
                                        <div class="col-lg-12">
                                            <div class="input-group">
                                              <input name="search_env_name" type="text" class="form-control" placeholder="环境名称" value="{{ search_env_name }}">
                                                <span class="input-group-btn">
                                                <button class="btn btn-primary" type="submit">搜索</button>
                                              </span>
                                            </div><!-- /input-group -->
                                        </div><!-- /.col-lg-12 -->
                                    </form>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>名称</th>
                                        <th>主机</th>
                                        <th>描述</th>
                                        <th>上下文</th>
                                        <th>规则文件</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody class="js_table">
                                        {% for row in obj %}
                                            <tr>
                                                <td>{{ row.id }}</td>
                                                <td>{{ row.env_name }}</td>
                                                <td>{{ row.base_url }}</td>
                                                <td>{{ row.simple_desc }}</td>
                                                <td>{{ row.capabilities|truncatewords:"2" }}</td>
                                                <td>{{ row.rule }}</td>
                                                <td>
                                                    <button class="btn-primary" onclick="edit('{{ row.id }}')">编辑</button>
                                                    <button class="btn-danger" onclick="isDel('{{ row.id }}')">删除</button>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <ul class="pagination" id="pager">
                                {#上一页按钮开始#}
                                {# 如果当前页有上一页#}
                                {% if obj.has_previous %}
                                    {#  当前页的上一页按钮正常使用#}
                                    <li class="previous"><a href="/ui/env_list?page={{ obj.previous_page_number }}">&laquo;</a></li>
                                {% else %}
                                    {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                    <li class="previous disabled"><a href="#">&laquo;</a></li>
                                {% endif %}
                                {#上一页按钮结束#}
                                {# 页码开始#}
                                {% for num in paginator.page_range %}

                                    {% if num == currentPage %}
                                        <li class="item active"><a href="/ui/env_list?page={{ num }}">{{ num }}</a></li>
                                    {% else %}
                                        <li class="item"><a href="/ui/env_list?page={{ num }}">{{ num }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {#页码结束#}
                                {# 下一页按钮开始#}
                                {% if obj.has_next %}
                                    <li class="next"><a href="/ui/env_list?page={{ obj.next_page_number }}">&raquo;</a></li>
                                {% else %}
                                    <li class="next disabled"><a href="#">&raquo;</a></li>
                                {% endif %}
                                {# 下一页按钮结束#}
                            </ul>
                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>
            <!-- /. 表格  -->
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
    <!--新建弹窗-->
    <div class="modal fade" id="newProject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" onclick="cancel()">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新建环境
                    </h4>
                </div>
                <div class="modal-body">
                    <!--内容-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">环境名称</label>
                            <div class="col-sm-10">
                                <input id='eName' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">环境主机</label>
                            <div class="col-sm-10">
                                <input id='eHost' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">appActivity</label>
                            <div class="col-sm-10">
                                <input id='appActivity' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">appPackage</label>
                            <div class="col-sm-10">
                                <input id='appPackage' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">apk包</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="resource">
                                    {% for resource in resource_list %}
                                        <option>{{ resource.resource_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="rule" class="col-sm-2 control-label">rule.js</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="rule">
                                    <option>请选择</option>
                                    {% for resource in resource_list %}
                                        <option>{{ resource.resource_name }}</option>
                                    {% endfor %}
                                </select>
                                <br/>
                                <p style="color: red">如果不需要使用代理规则可以不选择rule.js</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">描述信息</label>
                            <div class="col-sm-10">
                                <textarea id='remark' class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div id="message" class="col-sm-10 js_message text-danger"></div>
                        </div>

                    </form>
                    <!--内容-->

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default" onclick="cancel()">取消
                    </button>
                    <button id='save' type="button" class="btn btn-primary">
                        确定
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!--end 新建弹窗-->

    <!--编辑弹窗-->
    <div class="modal fade" id="edit_env" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" onclick="cancel()">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        编辑环境
                    </h4>
                </div>
                <div class="modal-body">
                    <!--内容-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">环境名称</label>
                            <div class="col-sm-10">
                                <input id='edit_eName' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">环境主机</label>
                            <div class="col-sm-10">
                                <input id='edit_eHost' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">appActivity</label>
                            <div class="col-sm-10">
                                <input id='edit_appActivity' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">appPackage</label>
                            <div class="col-sm-10">
                                <input id='edit_appPackage' type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">apk包</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="edit_resource">
                                    {% for resource in resource_list %}
                                        <option value="{{ resource.id }}">{{ resource.resource_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="rule" class="col-sm-2 control-label">rule.js</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="edit_rule">
                                    <option value="none">请选择</option>
                                    {% for resource in resource_list %}
                                        <option value="{{ resource.id }}">{{ resource.resource_name }}</option>
                                    {% endfor %}
                                </select>
                                <br/>
                                <p style="color: red">如果不需要使用代理规则可以不选择rule.js</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">描述信息</label>
                            <div class="col-sm-10">
                                <textarea id='edit_remark' class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div id="edit_message" class="col-sm-10 js_message text-danger"></div>
                        </div>

                    </form>
                    <!--内容-->

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default" onclick="cancel()">取消
                    </button>
                    <button id='edit-save' type="button" class="btn btn-primary">
                        确定
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!--end 编辑弹窗-->

    <!--删除询问弹窗提示-->
    <div class="modal fade" id="deleteObj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">删除环境</h4>
            </div>
            <div class="modal-body">
                <p>请确认是否删除该环境</p>
                <p id='delMessage' class="js_DELmessage text-danger"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" onclick="cancel()">取消</button>
                <button type="button" class="btn btn-primary" id="delButton">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
    <!--end 删除询问弹窗提示-->
{% endblock %}
